<template lang="pug">
  Modal.cpt-modal(ref="modal" :class="{full:full,max:state===1}" v-bind="$attrs" :value="value" @input="v=>$emit('input',v)" v-on="$listeners" :mask-closable="false"  v-modal-ext="{modal:modal,drag:drag}" )
    i.close-slot-icon.full-state-icon.icon(slot="close" @click.stop.prevent="fullSizeHandler" :class="state===0?'icon-window-maximize':'icon-window-restore'")
    Icon(type="ios-close-empty" slot="close" @click.native.stop="close()")
    slot
    div(slot="footer" v-if="$slots.footer")
      slot(name="footer")
</template>
<script>
import _ from 'lodash';
// 窗口最大化状态
const modalState = {
  normal: 0,
  max: 1
};
/**
 * 自定义Modal
 * 支持drag modal escClose
 */
export default {
  name: 'CptModal',
  inheritAttrs: false,
  props: {
    modal: {
      type: Boolean,
      default() {
        return true;
      }
    },
    drag: {
      type: Boolean,
      default() {
        return false;
      }
    },
    escClose: {
      type: Boolean,
      default() {
        return true;
      }
    },
    value: {
      type: Boolean,
      default() {
        return false;
      }
    },
    beforeClose: {
      // 关闭之前回掉，如果返回false 则取消关闭
      type: Function
    },
    full: Boolean // 是否可全屏
  },
  data() {
    return {
      escClasable: true,
      state: modalState.normal
    };
  },
  computed: {
    vEscClosable() {
      return this.escClose && this.escClasable;
    }
  },
  mounted() {
    this.setZindex();
    this.changeParentEscClosable();
    // 禁用modal组件的默认escclose ，采用自己的escClose 好处理关闭事件
    document.removeEventListener('keydown', this.$refs.modal.EscClose);
    document.addEventListener('keydown', this.escCloseEventHandler);
  },
  beforeDestory() {
    document.removeEventListener('keydown', this.escCloseEventHandler);
  },
  methods: {
    close() {
      let canClose = true;
      if (_.isFunction(this.beforeClose)) {
        canClose = this.beforeClose();
      }
      if (canClose !== false) {
        this.$emit('input', false);
      }
      this.restoreSize();
    },
    // 为了防止按esc健关闭全部的modal
    // 当本modal显示时将父modal设置escClose为不可用
    changeParentEscClosable(parent) {
      if (_.isUndefined(parent)) {
        parent = this.$parent;
      }
      if (parent.$options.name === 'cpt-modal') {
        this.$watch('value', nv => {
          _.delay(() => {
            parent.escClasable = !nv;
          }, 200);
        });
      } else {
        parent.$parent && this.changeParentEscClosable(parent.$parent);
      }
    },
    escCloseEventHandler(e) {
      if (e.keyCode === 27 && this.vEscClosable && this.value) {
        this.close();
      }
    },
    // 出来窗口最大化和还原
    fullSizeHandler(ev) {
      this.state =
        this.state === modalState.max ? modalState.normal : modalState.max;
    },
    restoreSize() {
      this.state = modalState.normal;
    },
    setZindex() {
      let parent = this.$parent;
      let zIndex = 800;
      while (parent) {
        if (parent.$options.name === 'cpt-modal') {
          zIndex++;
        }
        parent = parent.$parent;
      }
      this.$el.style.position = 'relative';
      this.$el.style.zIndex = zIndex;
    }
  }
};
</script>
<style lang="less">
.cpt-modal {
  //Modal 垂直居中
  .ivu-modal-wrap {
    display: flex;
    align-items: center;
    .ivu-modal {
      top: 0;
    }
  }

  .ivu-modal {
    .ivu-modal-body {
      position: relative;
    }
  }
  //非模态框所需样式
  &.no-modal {
    position: relative;
    z-index: 1001;
    .ivu-modal-mask {
      display: none;
    }
    .ivu-modal-content {
      box-shadow: 0 0 20px;
    }
    .ivu-modal-wrap {
      display: block;
      position: static;
    }
    .ivu-modal {
      position: absolute;
    }
  }

  .close-slot-icon {
    color: #999;
    display: inline-block;
    font-size: 16px;
    line-height: 31px;
    top: 2px;
    position: relative;
    vertical-align: top;
    margin-right: 0.5rem;
    &:hover {
      color: #444;
    }
  }
  .full-state-icon {
    display: none;
  }
  &.full {
    .full-state-icon {
      display: inline-block;
    }
    &.max {
      .ivu-modal {
        width: 100% !important;
      }
      .ivu-modal-content {
        border-radius: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        .ivu-modal-body {
          flex-grow: 1;
          overflow: auto;
        }
      }
    }
  }
}
</style>
